﻿<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/about.css">
<style>
.page {
	width: 100%;
	background: #F0F0F0 url('img/dian2.png') repeat-x;
}
</style>
<title>jQuery时间轴</title>
</head>
<body>

	<div class="box">
		<ul class="event_year">
			<li class="current"><label for="2013">2013</label></li>
			<li><label for="2012">2012</label></li>
			<li><label for="2011">2011</label></li>
			<li><label for="2010">2010</label></li>
			<li><label for="2009">2009</label></li>
			<li><label for="2008">2008</label></li>
			<li><label for="2007">2007</label></li>
			<li><label for="2006">2006</label></li>
			<li><label for="2005">2005</label></li>
			<li><label for="2004">2004</label></li>
			<li><label for="2003">2003</label></li>
			<li><label for="2002">2002</label></li>
		</ul>
		<ul class="event_list">
			<div>
				<h3 id="2013">2013</h3>
				<li><span>5月</span>
					<p>
						<span>文字信息</span>
					</p></li>
				<li><span>4月</span>
					<p>
						<span>文字信息，文字信息</span>
					</p></li>
				<li><span>3月</span>
					<p>
						<span>文字信息</span>
					</p></li>

			</div>
			<div>
				<h3 id="2012">2012</h3>
				<li><span>9月</span>
					<p>
						<span>文字信息</span>
					</p></li>

			</div>
			<div>
				<h3 id="2011">2011</h3>
				<li><span>3月13日</span>
				<p>
						<span>文字信息46</span>
					</p></li>
				<li><span>3月26日</span>
				<p>
						<span>文字信息45</span>
					</p></li>
				<li><span>4月-11月</span>
				<p>
						<span>文字信息44</span>
					</p></li>
				<li><span>6月11日</span>
				<p>
						<span>文字信息43</span>
					</p></li>
				<li><span>9月10日</span>
				<p>
						<span>文字信息42</span>
					</p></li>
			</div>

			<div>
				<h3 id="2010">2010</h3>
				<li><span>5月21日</span>
				<p>
						<span>文字信息41</span>
					</p></li>

				<li><span>5月26日</span>
				<p>
						<span>文字信息40</span>
					</p></li>


				<li><span>6月11日</span>
				<p>
						<span>文字信息39</span>
					</p></li>

				<li><span>9月10日</span>
				<p>
						<span>文字信息38</span>
					</p></li>

				<li><span>10月8日</span>
				<p>
						<span>文字信息37</span>
					</p></li>

				<li><span>10月14日</span>
				<p>
						<span>文字信息36</span>
					</p></li>

				<li><span>10月18日</span>
				<p>
						<span>文字信息35</span>
					</p></li>

				<li><span>12月4日</span>
				<p>
						<span>文字信息34</span>
					</p></li>
			</div>


			<div>
				<h3 id="2009">2009</h3>
				<li><span>3月20日</span>
				<p>
						<span>文字信息33</span>
					</p></li>

				<li><span>3月23日</span>
				<p>
						<span>文字信息32</span>
					</p></li>

				<li><span>7月8日</span>
				<p>
						<span>文字信息31</span>
					</p></li>

				<li><span>9月8日</span>
				<p>
						<span>文字信息30</span>
					</p></li>
				<li><span>11月26日</span>
				<p>
						文字信息29</span>
					</p></li>
			</div>

			<div>
				<h3 id="2008">2008</h3>
				<li><span>1月8日</span>
				<p>
						<span>文字信息29</span>
					</p></li>
				<li><span>2月2日</span>
				<p>
						<span>文字信息28</span>
					</p></li>
				<li><span>2月15日</span>
				<p>
						<span>文字信息27</span>
					</p></li>
				<li><span>4月16日</span>
				<p>
						<span>文字信息26</span>
					</p></li>
				<li><span>4月23日</span>
				<p>
						<span>文字信息25</span>
					</p></li>
				<li><span>4月28日</span>
				<p>
						<span>文字信息24</span>
					</p></li>
				<li><span>5月5日</span>
				<p>
						<span>文字信息23</span>
					</p></li>
				<li><span>5月6日</span>
				<p>
						<span>文字信息22</span>
					</p></li>
				<li><span>5月22日</span>
				<p>
						<span>推出"万站签名迎奥运"活动！</span>
					</p></li>
				<li><span>6月1日</span>
				<p>
						<span>文字信息21</span>
					</p></li>
			</div>


			<div>
				<h3 id="2007">2007</h3>
				<li><span>1月29日</span>
				<p>
						<span>文字信息21</span>
					</p></li>
				<li><span>3月3日</span>
				<p>
						<span>文字信息20</span>
					</p></li>
				<li><span>3月17日</span>
				<p>
						<span>文字信息19</span>
					</p></li>
				<li><span>3月31日</span>
				<p>
						<span>文字信息18</span>
					</p></li>
				<li><span>4月7日</span>
				<p>
						<span>文字信息17</span>
					</p></li>

				<li><span>4月22日</span>
				<p>
						<span>文字信息16</span>
					</p></li>

				<li><span>8月13日</span>
				<p>
						<span>文字信息15</span>
					</p></li>
				<li><span>9月14日</span>
				<p>
						<span>文字信息14</span>
					</p></li>
			</div>

			<div>
				<h3 id="2006">2006</h3>

				<li><span>4月8日</span>
				<p>
						<span>文字信息13</span>
					</p></li>
				<li><span>5月25日</span>
				<p>
						<span>文字信息12</span>
					</p></li>
				<li><span>8月8日</span>
				<p>
						<span>文字信息11</span>
					</p></li>
			</div>


			<div>
				<h3 id="2005">2005</h3>

				<li><span>7月16日</span>
				<p>
						<span>文字信息8</span>
					</p></li>
				<li><span>8月28日</span>
				<p>
						<span>文字信息7</span>
					</p></li>
				<li><span>9月1日</span>
				<p>
						<span>文字信息6</span>
					</p></li>
				<li><span>10月9日</span>
				<p>
						<span>文字信息5</span>
					</p></li>
				<li><span>11月5日</span>
				<p>
						<span>文字信息4</span>
					</p></li>
				<li><span>12月16日</span>
				<p>
						<span>文字信息3</span>
					</p></li>
				<li><span>12月23日</span>
				<p>
						<span>文字信息2</span>
					</p></li>
				<li><span>12月27日</span>
				<p>
						<span>文字信息1</span>
					</p></li>
			</div>


			<div>
				<h3 id="2004">2004</h3>
				<li><span>3月2日</span>
				<p>
						<span>文字信息6</span>
					</p></li>
				<li><span>4月18日</span>
				<p>
						<span>文字信息5</span>
					</p></li>
				<li><span>4月20日</span>
				<p>
						<span>文字信息4</span>
					</p></li>
				<li><span>5月7日</span>
				<p>
						<span>文字信息3</span>
					</p></li>
				<li><span>8月3日</span>
				<p>
						<span>文字信息2</span>
					</p></li>
				<li><span>9月3日</span>
				<p>
						<span>文字信息1</span>
					</p></li>
			</div>


			<div>
				<h3 id="2003">2003</h3>
				<li><span>3月22日</span>
				<p>
						<span>文字信息11</span>
					</p></li>
				<li><span>4月12日</span>
				<p>
						<span>文字信息10</span>
					</p></li>
				<li><span>5月13日</span>
				<p>
						<span>文字信息9</span>
					</p></li>
				<li><span>6月13日</span>
				<p>
						<span>文字信息8</span>
					</p></li>
				<li><span>6月25日</span>
				<p>
						<span>文字信息7</span>
					</p></li>
				<li><span>7月3日</span>
				<p>
						<span>文字信息6</span>
					</p></li>
				<li><span>7月9日</span>
				<p>
						<span>文字信息5</span>
					</p></li>
				<li><span>10月19日</span>
				<p>
						<span>文字信息4</span>
					</p></li>
				<li><span>11月2日</span>
				<p>
						<span>文字信息3</span>
					</p></li>
				<li><span>11月3日</span>
				<p>
						<span>文字信息2</span>
					</p></li>
				<li><span>12月26日</span>
				<p>
						<span>文字信息1</span>
					</p></li>
			</div>


			<div>

				<h3 id="2002">2002</h3>

				<li><span>12月28</span>
					<p>
						<span>文字信息7</span>
					</p></li>

				<li><span>12月27日</span>
					<p>
						<span>文字信息6</span>
					</p></li>


				<li><span>11月20日</span>
					<p>
						<span>文字信息5</span>
					</p></li>

				<li><span>10月21日</span>
					<p>
						<span>文字信息4</span>
					</p></li>

				<li><span>5月1日</span>
					<p>
						<span>文字信息3</span>
					</p></li>
				<li><span>4月1日</span>
					<p>
						<span>文字信息2</span>
					</p></li>
				<li><span>3月3日</span>
					<p>
						<span>文字信息1</span>
					</p></li>
			</div>




		</ul>

		<div class="clearfix"></div>

	</div>

	</div>

	<script src="js/jquery.min_v1.0.js" type="text/javascript"></script>
	<script>
		$(function() {
			$('label').click(
					function() {
						$('.event_year>li').removeClass('current');
						$(this).parent('li').addClass('current');
						var year = $(this).attr('for');
						$('#' + year).parent().prevAll('div').slideUp(800);
						$('#' + year).parent().slideDown(800).nextAll('div')
								.slideDown(800);
					});
		});
	</script>

</body>
</html>